<template>
	<view class="main">
		<cu-custom bgColor="bg-yellow text-white" :isBack="true"><block slot="backText">返回</block><block slot="content">包头爆料</block></cu-custom>
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in m.adv" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.imgUrl" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<scroll-view scroll-x class="bg-white nav bl-nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in redNav" :key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<view class="news-wall">
			<view class="news-item" v-for="(it,index) in page.items" :key="index" :class="it.attrType==0?'flex':it.attrType==1?'large':'many'">
				<view class="news-title" v-if="it.attrType==0">
					<view class="title" @click="goUrl(it)"><text v-if="it.isHot" class="red">热门</text>{{it.title}}</view>
					<view class="ts">{{os.getDateDiff(it.editTime)}} <view class="new-comment"><text class="cuIcon-comment"></text> {{it.commonCount}}</view></view>
				</view>
				<view class="news-image" v-if="it.attrType==0" @click="goUrl(it)">
					<image class="img" :src="it.img[0].image"></image>
				</view>
				<view class="news-title" v-if="it.attrType==1" @click="goUrl(it)">
					<view class="title"><text v-if="it.isHot" class="red">热门</text>{{it.title}}</view>					
				</view>
				<view class="news-image" v-if="it.attrType==1" @click="goUrl(it)">
					<image class="img" :src="it.img[0].image"></image>
				</view>
				<view class="ts" v-if="it.attrType==1">{{os.getDateDiff(it.editTime)}} <view class="new-comment"><text class="cuIcon-comment"></text> {{it.commonCount}}</view></view>
				<view class="news-title" v-if="it.attrType==2" @click="goUrl(it)">
					<view class="title"><text v-if="it.isHot" class="red">热门</text>{{it.title}}</view>					
				</view>
				<view class="news-image grid col-3" v-if="it.attrType==2" @click="goUrl(it)">
					<image class="img" v-for="(row,index) in it.img" :key="index" :src="row.image"></image>
				</view>
				<view class="ts" v-if="it.attrType==2">{{os.getDateDiff(it.editTime)}} <view class="new-comment"><text class="cuIcon-comment"></text> {{it.commonCount}}</view></view>
			</view>
		</view>
		<view class="no-data" v-show="pageshow">没有啦~~</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				redNav:[{title:'本地爆料'},{title:'热门资讯'},{title:'公告通知'}],
				cardCur: 0,
				m:{},
				page:{},
				param:{
					id:1080,
					page:1,
					attr:1,
					limit:20,
					total:1
				},
				pageshow:false
			};
		},
		onLoad() {
			uni.showLoading({
				title: 'loading'
			});
			this.loadData();
		},
		onReachBottom(){
			if(this.param.page>=this.param.total){
				this.pageshow=true;
			}else{
				this.param.page+=1;
				uni.showLoading({
					title: 'loading'
				});
				this.loadArticle();
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: 'loading'
			});
			this.isxl=true;
			this.param.page=1;
			this.pageshow=false;
			this.loadData();
		},
		methods: {
			async loadData(){
				let that=this;
				this.$api.ajax('index/bl/index',{},function(res){ 
					if(that.isxl){
						that.isxl=false;
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
					var data=res[1].data;console.log(data);
					if(data.statusCode==200){
						that.m=data.data;
						that.page=data.data.list;
						that.param.total=that.page.totalPages;
					}
					else{
						that.$api.msg('网络失败');
					}
				});
			},
			loadArticle(){
				let that=this;
				this.$api.ajax('index/article',that.param,function(res){ 
					uni.hideLoading();	
					var data=res[1].data;
					if(data.statusCode==200){
						if(data.data.items.length>0){
							if(that.param.page==1){
								that.page.items=[];
							}
							for(var i=0; i<data.data.items.length; i++){
								that.page.items.push(data.data.items[i]);
							}
						}
						else{
							that.page.items=[];
							that.pageshow=true;
						}
					}
					else{
						that.$api.msg('网络失败');
					}
				});
			},
			goUrl(m){
				uni.navigateTo({
					url: '/pages/news/info?id='+m.id
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				if(this.TabCur==0){
					this.param.id=1080;
				}
				if(this.TabCur==1){
					this.param.id=1081;
				}
				if(this.TabCur==2){
					this.param.id=1082;
				}
				
				this.param.page=1;
				this.pageshow=false;
				uni.showLoading({
					title: 'loading'
				});
				this.loadArticle();
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

<style lang='scss'>
	.no-data{
		text-align: center;
		padding: 15px 0;
		color: #777;
	}
	.card-swiper{
		background-color: #ffffff;
	}
	.bl-nav{
		margin-top: 8px;
		border-top: 6px solid #f1f1f1;
	}
	.news-wall{
		background-color: #ffffff;
		padding:15px;
		margin-top: 10px;
		.news-item.many{
			.news-title{
				width:100%;
				.title{
					padding-right: 0px;
				}
			}
			.news-image{
				width:100%;
				margin-top: 10px;
			}
			.news-image .img{
				width:32.666%;
				height: 80px;
				border-radius: 3px;
			}
			.news-image .img:nth-child(2){
				margin:0 1%;
			}
			.ts{
				margin-top: 5px;
				width:100%;
				font-size: 13px;
				color: gray;
				.new-comment{
					display: inline-block;
					margin-left: 20px;						
					.cuIcon-comment{
						margin-right: 3px;
						font-size: 18px;
						vertical-align: middle;
						position: relative;
						top: -1px;
						color: rgb(250, 67, 106);
					}
				}
			}
		}
		.news-item.large{
			.news-title{
				width:100%;
				.title{
					padding-right: 0px;
				}
			}
			.ts{
				margin-top: 5px;
				width:100%;
				font-size: 13px;
				color: gray;
				.new-comment{
					display: inline-block;
					margin-left: 20px;						
					.cuIcon-comment{
						margin-right: 3px;
						font-size: 18px;
						vertical-align: middle;
						position: relative;
						top: -1px;
						color: rgb(250, 67, 106);
					}
				}
			}
			.news-image{
				width:100%;
				margin-top: 10px;
			}
			.news-image .img{
				width:100%;
				height: 160px;
				border-radius: 3px;
			}
		}
		.news-item{
			border-bottom: 1px solid #e6e7e8;
			padding: 10px 0;
			position: relative;			
			.news-title{
				width:70%;
				.title{
					padding-right: 10px;
					color: #111;
					font-size: 16px;
					line-height: 24px;
					.red{
						background-color: #fa436a;
						color: #ffffff;
						font-size: 12px;
						margin-right: 5px;
						padding:3px 10px;
						border-radius: 5px;
						vertical-align: middle;
						position: relative;
						top: -1px;
					}
				}
				.ts{
					margin-top: 15px;
					width:100%;
					font-size: 13px;
					color: gray;
					.new-comment{
						display: inline-block;
						margin-left: 20px;						
						.cuIcon-comment{
							margin-right: 3px;
							font-size: 18px;
							vertical-align: middle;
							position: relative;
							top: -1px;
							color: rgb(250, 67, 106);
						}
					}
				}
			}			
			.news-image{
				width:30%;
			}
			.news-image .img{
				width:100%;
				height: 80px;
				border-radius: 3px;
			}
		}
	}
</style>
